| vue | 您所在的位置：网站首页 › vue 事件机制 › vue |
vue
|
事件三要素：
事件目标，事件处理程序，事件对象 事件流：默认情况下，先进行事件捕获（从外到内读取），然后进行事件冒泡（从内向外执行） 事件绑定：1）直接操作变量 {{num}} num new Vue({ el:'#app', data:{ name:'lisi', num:0 }, methods:{} })
2）调用一个函数 {{num}} num // app实例对象能够获取和操作 data/methods中的实例变量 var app=new Vue({ el:'#app', data:{ name:'lisi', num:0 }, methods:{ handler(){ // this-->当前vue实例对象 this.num++; // alert("hello") } } }); console.log(app.name); console.log(app.handler);3）传递参数 常量 {{num}} num // app实例对象能够获取和操作 data/methods中的实例变量 var app=new Vue({ el:'#app', data:{ name:'lisi', num:0 }, methods:{ handler(a){ console.log(10); // this-->当前vue实例对象 this.num++; // alert("hello") } } }); console.log(app.name); console.log(app.handler);变量： {{num}} num // app实例对象能够获取和操作 data/methods中的实例变量 var app=new Vue({ el:'#app', data:{ name:'lisi', num:0, a:'hello' }, methods:{ handler(a){ console.log(a); // this-->当前vue实例对象 this.num++; // alert("hello") } } }); console.log(app.name); console.log(app.handler);事件对象：$event:Vue内部属性 {{num}} num // app实例对象能够获取和操作 data/methods中的实例变量 var app=new Vue({ el:'#app', data:{ name:'lisi', num:0 }, methods:{ handler(a,event){ console.log(a); console.log(event); // this-->当前vue实例对象 this.num++; // alert("hello") } } }); console.log(app.name); console.log(app.handler);
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue提供了更好的方式：事件处理函数只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，通过事件修饰符来完成这些细节。 
签到
submit
new Vue({
el:'#app',
data:{},
methods:{
handler(event){
// event.stopPropagation();阻止事件冒泡
alert(event.currentTarget.id);
},
submit(event){
// event.preventDefault();阻止表单的提交
alert();
},
keyup(event){
// if(event.keyCode==13){
// alert("enter---");
// }
}
}
})
|
【本文地址】
公司简介
联系我们